/*adan hernandez se crea este hoja de estilos para que ayude a los efectos nuevos en la aplicación 
de trayectorioas*/
* {
    scrollbar-width: thin;
    scrollbar-color: #d5ddea #f8f9fa;
}

.carta-box{
	width: 200px;
	height: 200px;
	position:relative;
	perspective: 1000px;
}
.carta-box:hover .carta {
    transform: rotateY(180deg);
}

.carta {
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}

.cara {
  position: absolute;
  backface-visibility: hidden;
}

.cara.detras {
  transform: rotateY(180deg);
}
/*estilos para menus inicio de ciclo*/
.divMContenedor{
	width: 200px;
	height: 100px;
	position:relative;
	perspective: 1000px;
}
.divMContenedor:hover .divMCarta {
    transform: rotateY(180deg);
}

.divMCarta {
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}

.divMDelante {
  position: absolute;
  backface-visibility: hidden;
}

.divMDelante.DivMAtras {
  transform: rotateY(180deg);
}
/*estilos para familias*/
.carta-boxF{
	width: 320px;
	height: 120px;
	position:relative;
	perspective: 1000px;
}

.carta-boxF:hover .carta {
    transform: rotateY(180deg);
}

/*papas*/
.carta-boxPapas{
	width: 320px;
	height: 232px;
	position:relative;
	perspective: 1000px;
}

.carta-boxPapas:hover .carta {
    transform: rotateY(180deg);
}


/*Tamaño de los abuelos*/
.carta-boxAbuelo{
	width: 200px;
	height: 120px;
	position:relative;
	perspective: 1000px;
}

.carta-boxAbuelo:hover .carta {
    transform: rotateY(180deg);
}

/*Estilos para sección de cursos escuela para padres--leslie Álvarez(chan)*/
.carta-box-curso{
	width: 260px;
	height: 350px;
	position:relative;
	perspective: 1000px;
	margin-bottom: 10px;
}
.carta-box-curso:hover .carta-curso {
    transform: rotateY(180deg);
}
 
.carta-curso {
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}
 
.cara-curso {
  position: absolute;
  backface-visibility: hidden;
}
 
.cara-curso.detras-curso {
  transform: rotateY(180deg);
}
 
/*Fin sección*/

/*Estilos para la sección de Evaluaciones--Leslie*/
 
.carta-box-evaluacion{
	width: 280px;
	height: 145px;
	position:relative;
	perspective: 1000px;
	margin-bottom: 10px;
}
.carta-box-evaluacion:hover .carta-evaluacion {
    transform: rotateY(180deg);
}
 
.carta-evaluacion {
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}
 
.cara-evaluacion{
  position: absolute;
  backface-visibility: hidden;
}
 
.cara-evaluacion.detras-evaluacion {
  transform: rotateY(180deg);
  background: #fff;
}
 
 
 
/*Fin Sección*/


/*Estilos para mostrar confetti en pantalla de evaluaciones cuando el alumno obtuvo un certificado --Joaquín*/
    .confetti-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
    }

    .confetti-piece {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: red;
      opacity: 0.8;
      animation: fall-and-rotate 2s linear infinite;
    }

    @keyframes fall-and-rotate {
      0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
      }
    }
/*Fin sección*/

/*Estilos para libreta en habilidades - Leslie Chan */
	.circulo{
		position: absolute;
		top: 22px;
		left: 21px;
		width: 14px;
		height: 14px;
		background-color: white;
		border-radius: 50%;
		color: white;
		box-shadow: 0 40px, 0 80px, 0 120px, 0 160px, 0 200px;
	}
	.linea{
		position: absolute;
		top: 3px;
		left: -21px;
		width: 30px;
		height: 8px;
		background-color: #1065C6;
		border-radius: 8px;
		color: #1065C6;
		box-shadow: 0 40px, 0 80px, 0 120px, 0 160px, 0 200px;
	}
/*Fin sección*/


/*Estilos para la barra de progreso- Leslie Chan */
 
.progress {
  width: 100%;
  background-color: #e0e0e0; 
  border-radius: 12px;
  overflow: hidden;
  height: 10px; 
  margin: 0px;
}
 
.progress-bar {
  height: 100%;
  width: 0%; 
  background-color: #0A2960; 
  transition: width 0.4s ease-in-out;
}}
/*Fin sección*/


.carta-box-evaluacion1{
	width: 100%;
	height: 145px;
	position:relative;
	perspective: 1000px;
	margin-bottom: 10px;
}